<template>
  <div
    v-loading="loading"
    class="main-container">
    <filtrate-handle-view
      title="产品分析"
      class="filtrate-bar"
      module-type="customer"
      @load="loading=true"
      @change="searchClick">
      <div slot="append">
        <el-input
          v-model="keywords"
          placeholder="请输入产品名称"
          class="search-box" />
      </div>
    </filtrate-handle-view>
    <div class="content jxc-content">
      <div class="radio-box">
        <el-radio-group v-model="statisticsType" @change="refreshData">
          <el-radio :label="1">
            按单规格统计
            <el-tooltip
              effect="dark"
              content="一种产品有多个规格，显示多条数据"
              placement="bottom">
              <span class="el-icon-question" />
            </el-tooltip>
          </el-radio>
          <el-radio :label="2">
            按多规格汇总统计
            <el-tooltip
              effect="dark"
              content="一种产品有多个规格，只显示一条数据"
              placement="bottom">
              <span class="el-icon-question" />
            </el-tooltip>
          </el-radio>
        </el-radio-group>
      </div>
      <div class="static">
        <span class="text">采购产品总数：{{ headData.purchaseProductCount || 0 }}</span>
        <span class="text">采购退货产品总数：{{ headData.retreatProductCount || 0 }}</span>
        <span class="text">销售产品总数：{{ headData.saleProductCount || 0 }}</span>
        <span class="text">销售退货产品总数：{{ headData.saleReturnProductCount || 0 }}</span>
        <span class="text">出库总数：{{ headData.outboundProductCount || 0 }}</span>
        <span class="text">入库总数：{{ headData.receiptProductCount || 0 }}</span>
      </div>
      <el-table
        :data="list"
        :summary-method="getSummaries"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        show-summary
        stripe
        border
        highlight-current-row
        @sort-change="({ prop, order }) => mixinSortFn(list, prop, order)">
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :prop="item.field"
          :label="item.name"
          :sortable="item.sortable"
          :formatter="item.formatter || null"
          min-width="130"
          align="center"
          header-align="center"
          show-overflow-tooltip />
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>

    <list-view
      v-if="showListView"
      :config="listConfig"
      @close="showListView = false" />
  </div>
</template>

<script>
/**
 * Create by yxk at 2020/7/8 0008
 */
import {
  jxcProductStatisticsAPI,
  jxcProductStatisticsHeadAPI
} from '@/api/bi/jxc'

import BaseMixin from '../../mixins/Base'
import SortMixin from '../../mixins/Sort'
import JxcMixin from '../JxcMixin'

export default {
  name: 'JXCProductAnalyze',
  mixins: [BaseMixin, SortMixin, JxcMixin],
  data() {
    return {
      keywords: '',
      requestParams: {},

      statisticsType: 1,
      headData: {},
      list: [],
      fieldList: [
        { field: 'productName', name: '产品信息' },
        { field: 'purchaseProductCount', name: '采购数量', sortable: true },
        { field: 'retreatProductCount', name: '采购退货数', sortable: true },
        { field: 'saleProductCount', name: '销售数量', sortable: true },
        { field: 'saleReturnProductCount', name: '销售退货数量', sortable: true },
        { field: 'outboundProductCount', name: '出库数量', sortable: true },
        { field: 'receiptProductCount', name: '入库数量', sortable: true }
      ],
      tableHeight: document.documentElement.clientHeight - 274 // 表格高度
    }
  },
  mounted() {},
  methods: {
    searchClick(data) {
      this.requestParams = data
      this.refreshData()
    },

    refreshData() {
      this.currentPage = 1
      this.getDataList()
      this.getHeadData()
    },

    getDataList() {
      const params = { ...this.requestParams }
      params.search = this.keywords
      params.statisticsType = this.statisticsType
      params.page = this.currentPage
      params.limit = this.pageSize
      this.loading = true
      jxcProductStatisticsAPI(params).then(res => {
        this.loading = false
        this.list = res.data.list || []
        this.total = res.data.totalRow
      }).catch(() => {
        this.loading = false
      })
    },

    getHeadData() {
      const params = { ...this.requestParams }
      params.search = this.keywords
      params.statisticsType = this.statisticsType
      this.requestParams = params
      this.loading = true
      jxcProductStatisticsHeadAPI(params).then(res => {
        this.loading = false
        this.headData = res.data || {}
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../styles/detail.scss';
</style>
